<template>
  <el-card
    shadow="never"
    header="七、经费预算明细表 （单位：万元））"
    :body-style="{ color: '#606266', lineHeight: 1.5 }"
  >
    <div v-for="(item, index) in options" :key="index">
      <vxe-form>
        <vxe-form-item title="经济来源：">
          <template #default>
            {{ item.budgetSaveReqVO.fundSource }}
          </template>
        </vxe-form-item>
        <vxe-form-item title="年份：">
          <template #default>
            {{ item.budgetSaveReqVO.year }}
          </template>
        </vxe-form-item>
        <vxe-form-item title="部门：">
          <template #default>
            {{ item.budgetSaveReqVO.departmentId }}
          </template>
        </vxe-form-item>
        <vxe-form-item title="经济类型：">
          <template #default>
            {{ item.budgetSaveReqVO.fundTypeId }}
          </template>
        </vxe-form-item>
      </vxe-form>
      <vxe-table
        border
        show-overflow
        :data="item.detailSaveReqVOS"
        :column-config="{ resizable: true }"
      >
        <vxe-column type="seq" width="60" />
        <vxe-column field="name" title="设备名称" />
        <vxe-column field="model" title="规格型号" />
        <vxe-column field="country" title="生产厂家·国别" />
        <vxe-column field="price" title="单价" />
        <vxe-column field="unit" title="单位" />
        <vxe-column field="num" title="数量" />
        <vxe-column field="free" title="费用" />
        <vxe-column field="use" title="用途" />
      </vxe-table>
    </div>
  </el-card>
</template>

<script setup>
  const props = defineProps({
    budgetAndDetailVO: {
      type: Array,
      default: () => [],
    },
  })

  const options = ref([])

  const createData = () => {
    options.value = [props.budgetAndDetailVO].map((item) => {
      return {
        budgetSaveReqVO: item.budgetSaveReqVO,
        detailSaveReqVOS: item.detailSaveReqVOS.map((sub) => {
          const cost = JSON.parse(sub.cost)
          return {
            ...sub,
            name: cost.name,
            model: cost.model,
            country: cost.country,
            price: cost.price,
            unit: cost.unit,
            num: cost.num,
            free: cost.free,
            use: cost.use,
          }
        }),
      }
    })
  }

  createData()
</script>

<style lang="scss" scoped></style>
